/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState, useEffect, memo } from 'react';
import { InputItem, Popover, Icon, Modal } from 'antd-mobile';
import arrowImg from '@/pages/RecruitEmail/images/icon-arrow.png';
import arrowUp from '@/pages/RecruitEmail/images/arrow-up.png';
import styles from './index.less';
// import Popup from '../Popup';
import ListItem from '../ListItem';

function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
        if (matchesSelector.call(el, selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}
const { Item } = Popover;
// interface CellPhoneProps {
//     onChange: Function;
//     setPhoneAreaCode: Function;
//     setPhone: Function;
//     value: string;
//     type?: string;
//     placeholder?: string;
//     editable?: boolean;
//     clear?: boolean;
// }
const CellPhone = React.forwardRef((props, ref) => {
    const {
        onChange,
        onBlur,
        value,
        type = 'number',
        placeholder = '电话',
        editable = true,
        clear = true,
        setPhoneAreaCode,
        setPhone,
        maxLength = 11
    } = props;
    const onWrapTouchStart = e => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
            e.preventDefault();
        }
    };
    console.log('CellPhone', props);
    const [cellPhoneVal, setCellPhoneVal] = useState(''); // 手机号码的值，不包含国家号
    const [countryCode, setCountryCode] = useState('+86');
    const [popVisible, setPopVisible] = useState(false);
    const [iconType, setIconType] = useState('down');
    useEffect(() => {
        if (value) {
            const subVal = value.substring(3);
            setCellPhoneVal(subVal);
            setPhone(subVal);
            const countryCod = value.substring(0, 3);
            setCountryCode(countryCod);
            setPhoneAreaCode(countryCod);
        }
    }, [value]);
    useEffect(() => {
        if (setPhoneAreaCode) {
            setPhoneAreaCode(countryCode);
        }
        if (onChange && cellPhoneVal) {
            onChange(countryCode + cellPhoneVal);
        }
    }, [countryCode]);
    const handleVisibleChange = visible => {
        setPopVisible(visible);
        if (visible) {
            setIconType('up');
        } else {
            setIconType('down');
        }
    };
    const onSelect = opt => {
        setPopVisible(false);
        setIconType('down');
        setCountryCode(opt.props.value);
    };

    const data = [
        { label: '中国  +86', value: '+86' },
        { label: '新加坡  +65', value: '+65' }
    ];
    return (
        <div className={styles.cellContainer}>
            <Modal
                popup
                visible={popVisible}
                animationType="slide-up"
                className={styles.customPopup}
                wrapProps={{ onTouchStart: onWrapTouchStart }}
                onClose={() => setPopVisible(false)}
            >
                <div className={styles.pickerHead}>
                    <div className={styles.title}>选择国际电话区号</div>
                </div>
                <div className={styles.contentWrap}>
                    {data?.map(item => (
                        <ListItem
                            style={{ paddingLeft: '16px', paddingRight: '16px' }}
                            titleStyle={{ textAlign: 'left' }}
                            title={item?.label}
                            showArrow={false}
                            key={item?.value}
                            onClick={() => {
                                setCountryCode(item?.value);
                                setPopVisible(false);
                            }}
                        ></ListItem>
                    ))}
                </div>
            </Modal>
            <div className={styles.cellTitle} onClick={() => setPopVisible(!popVisible)}>
                <span>{countryCode}</span>
                <img src={popVisible ? arrowUp : arrowImg} className={styles.iconImg} alt=""></img>
                {/* <Icon type={iconType} size="xxs"></Icon> */}
            </div>
            <InputItem
                onChange={val => {
                    if (onChange) {
                        if (setPhone) {
                            setPhone(val);
                        }
                        onChange(countryCode + val);
                    }
                }}
                className={styles.input}
                type={type}
                value={cellPhoneVal}
                placeholder={placeholder}
                clear={clear}
                editable={editable}
                maxLength={maxLength}
                onBlur={val => {
                    if (onBlur) {
                        onBlur(countryCode + val);
                    }
                }}
            />
        </div>
    );
});
export default CellPhone;
